<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>预约信息</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
		<link rel="stylesheet" href="../css/yyxxCLZ.css" />
		<style>
			/* 顶部导航栏样式 */
			.custom-header {
				background-color: #f8f9fa;
				padding: 10px;
				display: flex;
				align-items: center;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				white-space: nowrap;
				/* 防止内容换行 */
			}

			.custom-header .back-icon {
				margin-right: 15px;
				font-size: 1.2rem;
			}

			.custom-header h5 {
				margin: 0;
				/* 去掉标题的默认 margin */
				flex-grow: 1;
				/* 让标题占据剩余空间 */
				text-align: center;
				/* 标题居中 */
			}

			.custom-header .ms-auto {
				display: flex;
				align-items: center;
				gap: 10px;
				/* 设置图标之间的间距 */
			}

			/* 容器样式 */
			.container {
				max-width: 800px;
				/* 设置最大宽度 */
				margin: 20px auto;
				/* 居中显示 */
				padding: 0 15px;
				/* 添加内边距 */
			}

			/* 卡片样式 */
			.card {
				border: none;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
				margin-bottom: 20px;
				/* 添加底部间距 */
			}

			/* 信息项样式 */
			.info-item {
				padding: 10px 0;
				border-bottom: 1px solid #dee2e6;
				display: flex;
				align-items: center;
			}

			.info-label {
				width: 120px;
				font-weight: bold;
				color: #495057;
			}

			/* 故障图片样式 */
			.fault-image {
				width: 80px;
				height: 80px;
				background-color: #e9ecef;
				margin-right: 10px;
				border-radius: 8px;
			}

			/* 底部工具栏样式 */
			.fixed-bottom-tool {
				position: fixed;
				bottom: 100px;
				/* 调整按钮位置，往上移动 */
				right: 15px;
			}

			/* 底部导航栏样式 */
			.bottom-nav {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: white;
				border-top: 1px solid #dee2e6;
				padding: 8px 0;
				box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
			}

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				color: #6c757d;
				font-size: 14px;
				padding: 0 15px;
			}

			.nav-item.active {
				color: #007bff;
			}

			.nav-icon {
				font-size: 20px;
				margin-bottom: 3px;
			}

			/* 取消卡片边框 */
			.card {
				border: none;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
			}

			/* 取消信息项的下边框 */
			.info-item:last-child {
				border-bottom: none;
			}

			/* 调整故障图片容器样式 */
			.fault-image img {
				border-radius: 8px;
			}

			.custom-header a {
				text-decoration: none;
			}

			#cancelWorkorderBtn {
				background-color: #dee2e6;
			}
		</style>
	</head>
	<body>
		<div class="custom-header">
			<a href="YiQuXiao.html"><span class="back-icon">←</span></a>
			<h5 class="mb-0">预约信息</h5>
			<div class="ms-auto">
				<a href="#" class="text-dark"><i class="bi bi-three-dots-vertical"></i></a>
				<a href="#" class="text-dark ms-3"><i class="bi bi-eye"></i></a>
			</div>
		</div>

		<div class="container">
			<div class="row g-3">
				<div class="col-12">
					<div class="d-flex justify-content-between align-items-center mb-3">
						<span>维修单号：<span id="woNumber"></span> <i class="bi bi-file-earmark"></i></span>
						<span class="status-tag">审核未通过</span>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="card">
					<input type="hidden" id="uid" />
					<input type="hidden" id="wid" />
					<div class="card-body p-0">
						<div class="info-item">
							<span class="info-label">故障位置：</span>
							<span id="faultLocationDetail"></span>
						</div>
						<div class="info-item">
							<span class="info-label">维修日期：</span>
							<span class="text-warning" id="repairDateDetail"></span>
						</div>
						<div class="info-item">
							<span class="info-label">联系人：</span>
							<span id="contactNameDetail"></span>
						</div>
						<div class="info-item">
							<span class="info-label">联系电话：</span>
							<span id="contactPhoneDetail"></span>
						</div>
						<div class="info-item">
							<span class="info-label">故障描述：</span>
							<span id="faultReasonDetail"></span>
						</div>
						<div class="info-item">
							<span>故障图片:</span>
							<div class="d-flex gap-2">
								<div class="bg-gray-200" style="width: 80px; height: 60px;">
									<img id="faultImage1" src="" alt="故障图片1"
										style="width: 100%; height: 100%; object-fit: cover;">
								</div>
								<div class="bg-gray-200" style="width: 80px; height: 60px;">
									<img id="faultImage2" src="" alt="故障图片2"
										style="width: 100%; height: 100%; object-fit: cover;">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="charge-item">
				<h5>收费项</h5>
				<div id="shoufei"></div>
			</div>
			<div class="section">
				<div class="card">
					<div class="card-body p-0">
						<h6 class="section-label">取消工单</h6>
						<div class="info-item">
							<span class="info-label">取消原因：</span>
							<span>协商一致取消</span>
						</div>
						<div class="info-item">
							<span class="info-label">提交人：</span>
							<span>冯总</span>
						</div>
						<div class="info-item">
							<span class="info-label">取消日期：</span>
							<span>2024-06-06</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="fixed-bottom-tool">

			<button class="btn btn-light border rounded-pill px-3 py-2">
				取消订单
			</button>
			<button class="btn btn-light border rounded-pill px-3 py-2" id="cancelWorkorderBtn">
				上传费用
			</button>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">上传</h4>
					</div>
					<div class="modal-body">
						<table class="fee-table">
							<colgroup>
								<col width="20%"> <!-- 材料编号 -->
								<col width="20%"> <!-- 材料名称 -->
								<col width="15%"> <!-- 材料单位 -->
								<col width="15%"> <!-- 项目服务单价 -->
								<col width="10%"> <!-- 数量 -->
								<col width="20%"> <!-- 费用合计 -->
							</colgroup>
							<thead>
								<tr>
									<th style="font-size: 16px;">编号</th>
									<th style="font-size: 14px;">名称</th>
									<th style="font-size: 14px;">单位</th>
									<th style="font-size: 14px;">单价（元）</th>
									<th style="font-size: 14px;">数量</th>
									<th style="font-size: 14px;">合计</th>
								</tr>
							</thead>
							<tbody id="_tbody">
								<!-- 动态内容 -->
							</tbody>
							<tfoot>
								<tr>
									<td colspan="6" class="total-section">
										总计：<span id="totalCount">0</span>项
										<span style="margin-left:24px">金额总计：</span>
										￥<span id="totalAmount">0.00</span>
									</td>
								</tr>
								<tr>
									<td colspan="6" class="action-bar">
										<button class="action-btn btn-submit" id="btn-close">关闭</button>
										<button class="action-btn btn-submit" id="btn-submit">提交修改</button>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<nav class="bottom-nav">
			<div class="container d-flex justify-content-around">
				<a href="#" class="nav-item">
					<i class="bi bi-house nav-icon"></i>
					首页
				</a>
				<a href="#" class="nav-item active">
					<i class="bi bi-wrench nav-icon"></i>
					报障维修
				</a>
				<a href="#" class="nav-item">
					<i class="bi bi-person nav-icon"></i>
					我的
				</a>
			</div>
		</nav>

		<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/script/YYXXSHWTG.js"></script>
	</body>
</html>